<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>{{a}}</p>
    </div>

    <!-- 实例生命周期钩子 -->
    <div id="app2">
        <p>{{a}}</p>

    </div>
    <!-- 实例生命周期钩子 -->

    <script type="text/javascript">
    //数据对象
    var data={a:1}
    
    //数据对象被加入到实例中
    var vm=new Vue({
        el:'#app',
        data:data,
    
    })

    // 获得这个实例上的 property
    // 返回源数据中对应的字段
    console.log(vm.a == data.a) // => true
    
    // 设置 property 也会影响到原始数据
    vm.a = 2
    console.log(data.a) // => 2

    // ……反之亦然
    data.a = 3
    console.log(vm.a) // => 3

    //实例生命周期钩子
    new Vue({
        el:"#app2",
        data:{
            a:1
        },
        //实例被创建后
        created:function(){
            this.a=3
        }
    })
    </script>
</body>
</html>